<template>
  <a-card>
    <template slot="extra">
      <a-button type="link" @click="$router.push({ name: 'AddCategory' })">一级分类</a-button>
      <a-button type="link" @click="$router.push({ name: 'AddSecondCategory' })">二级分类</a-button>
      <a-button type="link" @click="$router.push({ name: 'AddProduct' })">添加产品</a-button>
    </template>
    <a-form-model
      :model="form"
    >
      <a-form-model-item label="主图">
        <a-upload
          name="file"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          :action="uploadUrl"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <img v-if="form.image" :src="form.image" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">
              主图
            </div>
          </div>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item label="选择分类">
        <a-select v-model="form.c_id">
          <a-select-option v-for="(item,index) in categoryOpts" :key="index" :value="index">
            {{item}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="服务名称">
        <a-input v-model="form.name" type="text" />
      </a-form-model-item>
      <a-form-model-item label="价格">
        <a-input v-model="form.price" type="text" />
      </a-form-model-item>
      <a-form-model-item label="描述">
        <a-textarea v-model="form.describe" :rows="5"></a-textarea>
      </a-form-model-item>
      <a-form-model-item label="产品内容">
        <a-upload
          :action="uploadUrl"
          list-type="picture-card"
          :file-list="fileList"
          @change="handleChange1"
        >
          <a-icon type="plus" />
          <div class="ant-upload-text">
            Upload
          </div>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="onSubmit">添加服务</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import WangEditor from '@/components/Editor/WangEditor'
import QuillEditor from '@/components/Editor/QuillEditor'
import apis from '@/api'
import { getAddProduct, postAddProduct } from '@/api/product'

export default {
  components: {
    QuillEditor,
    WangEditor
  },
  name: 'AddProduct',
  data () {
    return {
      form: {},
      imageUrl: '',
      loading: false,
      uploadUrl: apis.Upload,
      previewVisible: false,
      previewImage: '',
      fileList: [],
      categoryOpts: {}
    }
  },
  created () {
    this.getProductInfo()
  },
  methods: {
    getProductInfo () {
      getAddProduct().then(res => {
        this.categoryOpts = res.result.categoryOpts
      })
    },
    handleChange (info) {
      console.log(info.file)
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        this.form.image = info.file.response.data
        this.loading = false
      }
    },
    beforeUpload (file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    handleChange1 ({ fileList }) {
      this.fileList = fileList
    },
    onSubmit () {
      let content = ''
      const arr = this.fileList
      for (let i = 0; i < arr.length; i++) {
        content = content + '<p>' + '<img src="' + arr[i].response.data + '" />' + '</p>'
      }
      this.form.content = content.toString()
      postAddProduct(this.form).then(res => {
        if (res.status === 0) {
          this.form = {}
          this.fileList = []
        } else {
          this.$warning({
            title: res.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
